<template>
  <div class="business">
          <div>
            <!-- 配送信息 -->
          <div id="box">
              <h3>配送信息</h3>
              <p>由商家配送提供配送，&ensp;约{{data.order_lead_time}}分钟，&ensp;距离{{data.status}}m</p>
              <b>{{data.piecewise_agent_fee && data.piecewise_agent_fee.description}}</b>
          </div>
          <!-- 活动与服务 -->
          <div id="box_dong">
            <div class="xue">
                <h3>服务与活动</h3>
                    <div v-for="(item ,index) in activities" :key="index" class="you">
                    <div class="pink">{{item.icon_name}}</div>
                    <p>{{item.description}}</p>
                </div>
              </div>
          </div>
          <!-- 商家实景 -->
          <h3 style="margin-left:19px;margin-top:10px;font-size:19px;">商家实景</h3>
          <div class="wen">
              <div class="jia" v-for="(item ,index) in data.albums" :key="index">
                <p>{{item && item.name}}(一张)</p>
                <img :src="'//fuss10.elemecdn.com/'+item.cover_image_hash.substr(0,1)+'/'+item.cover_image_hash.substr(1,2)+'/'+item.cover_image_hash.substr(3)+'.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/'" width="100px" height="100px">
              </div>
            </div>
          <!-- 商家信息 -->
          <h3 style="margin-left:19px;margin-top:10px;font-size:19px;">商家信息</h3>
          <div class="end">
              <p>暂无简历</p>
              <div class="happy"><span>品类</span><span style="float:right;color:#666;">{{data.flavors[0] && data.flavors[0].name}},{{data.flavors[1] && data.flavors[1].name}}</span></div>
              <div class="happy"><span>商家电话</span><span style="float:right;color:#666;">{{data.phone}}</span></div>
              <div class="happy"><span>地址</span><span class="dizhi">{{data.address}}</span></div>
              <div class="happy"><span>营业时间</span><span style="float:right;color:#666;">{{data.opening_hours[0]}}</span></div>
              <p class="fooder">营业资质</p>
          </div>
      </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name:'business',
  data(){
   return {
      data: {
        albums:[],
        address:'',
        opening_hours:[],
        flavors:[
          name,
        ]
      },
      activities: "",
   }
  },
   created() {
    axios.get("static/json/data.json").then(response => {
      // console.log(response);
      this.data = response.data.rst;
      // this.datas = response.data.rst.albums;
      // console.log(this.data)
      this.activities = response.data.rst.activities;
      // console.log(this.activities);
      // console.log(this.data.albums[1].name)
      // console.log(this.data.opening_hours[0])
    });
  }
}
</script>

<style scoped lang="scss">
#box{
  margin-left: 20px;
  h3{
    font-size: 18px;
  }
  p,b{
    margin-top: 10px;
    color:#666;
  }
}
.xue{
  margin-top: 26px;
  padding-left: 20px;
  border-top: 11px solid #f5f5f5;
  h3{
    margin-top: 15px;
    font-size: 18px;
  }
  .pink{
    width: 38px;
    height: 21px;
    background: #f07373;
    text-align: center;
    line-height: 21px;
    border-radius: 3px;
    font-size: 13px;
    color: #fff;
    margin-top: 7px;
    font-weight: bold;
  }
  .you{
    display: flex;
    line-height: 34px;
    p{
      padding-left: 10px;
      font-size: 15px;
      color:#666666;
    }
  }
}
.wen{
  display:flex;
  padding-left: 15px;
  border-bottom: 11px solid #f5f5f5;
  h3{
    margin-left: 20px;
  }
  .jia{
  margin-left: 10px;
  p{
    position: relative;
    bottom: -99px;
    left: 20px;
    font-size: 15px;
    color:#fff;
  }
  }
}
.end{
  p,.happy{
    border-bottom: 2px solid #f5f5f5;
    line-height: 40px;
    margin-left: 20px;
    font-size: 16px;
    color:#666666;
  }
  .happy{
    span{
       color:#333;
    }
    .dizhi{
    float:right;
    color:#666;
    font-size:10px;
    }
  }
  .fooder{
    font-weight:bold;
    color:#333;
    font-size:19px;
    border-top:10px solid #f5f5f5;
    border-bottom:10px solid #f5f5f5;
    margin-left: -2px;
    padding-left: 19px;
  }
}
</style>

